'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { FaRobot, FaDownload, FaGithub } from 'react-icons/fa';

export default function Home() {
  return (
    <div className="min-h-screen bg-black text-white overflow-hidden">
      {/* 背景装饰 */}
      <div className="fixed inset-0 z-0">
        <Image
          src="/hero-bg.svg"
          alt="Background"
          fill
          className="object-cover"
          priority
        />
      </div>

      {/* 顶部协作智能区域 */}
      <section className="relative z-10 container mx-auto px-4 pt-20 pb-32 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="relative"
        >
          <Image
            src="/wave.svg"
            alt="Wave"
            width={1920}
            height={320}
            className="absolute top-0 left-1/2 -translate-x-1/2 -z-10 opacity-50"
          />
          <h1 className="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 text-transparent bg-clip-text">
            智能协作
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
            Trae IDE 无缝集成到您的工作流程中，通过智能协作提升您的开发效率和性能。
          </p>
          <div className="flex gap-6 justify-center items-center">
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="bg-gradient-to-r from-pink-600 to-purple-600 text-white px-8 py-4 rounded-full font-semibold text-lg flex items-center gap-2 hover:shadow-lg hover:shadow-purple-500/25 transition-shadow"
            >
              <FaDownload className="text-xl" />
              下载 Trae
            </motion.button>
            <motion.a
              href="https://github.com"
              target="_blank"
              rel="noopener noreferrer"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="bg-white/10 text-white px-8 py-4 rounded-full font-semibold text-lg flex items-center gap-2 hover:bg-white/20 transition-colors"
            >
              <FaGithub className="text-xl" />
              GitHub
            </motion.a>
          </div>
        </motion.div>
      </section>

      {/* 中部AI工程师介绍区域 */}
      <section className="relative z-10 container mx-auto px-4 py-24 bg-gradient-to-b from-transparent to-black/50">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="text-center"
        >
          <h2 className="text-4xl md:text-6xl font-bold mb-16 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text">
            与真正的 AI 工程师协作
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="bg-gradient-to-br from-purple-900/50 to-black p-8 rounded-2xl backdrop-blur-sm border border-purple-500/20"
            >
              <FaRobot className="text-6xl text-purple-400 mx-auto mb-6" />
              <h3 className="text-2xl font-bold mb-4 text-purple-300">自然对话</h3>
              <p className="text-gray-300 text-lg">
                通过自然语言与 AI 进行交流，让复杂的开发任务变得简单直观。
              </p>
            </motion.div>
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="bg-gradient-to-br from-pink-900/50 to-black p-8 rounded-2xl backdrop-blur-sm border border-pink-500/20"
            >
              <FaRobot className="text-6xl text-pink-400 mx-auto mb-6" />
              <h3 className="text-2xl font-bold mb-4 text-pink-300">智能协助</h3>
              <p className="text-gray-300 text-lg">
                AI 助手理解上下文，提供精准的代码建议和问题解决方案。
              </p>
            </motion.div>
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="bg-gradient-to-br from-cyan-900/50 to-black p-8 rounded-2xl backdrop-blur-sm border border-cyan-500/20"
            >
              <FaRobot className="text-6xl text-cyan-400 mx-auto mb-6" />
              <h3 className="text-2xl font-bold mb-4 text-cyan-300">效率提升</h3>
              <p className="text-gray-300 text-lg">
                显著提高开发效率，让您专注于创造性的工作。
              </p>
            </motion.div>
          </div>
        </motion.div>
      </section>

      {/* 底部免费开始区域 */}
      <section className="relative z-10 container mx-auto px-4 py-24 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
        >
          <h2 className="text-4xl md:text-6xl font-bold mb-8">
            免费开始使用 <span className="text-red-500">Trae</span>
          </h2>
          <p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
            立即体验强大的 AI 编程助手，享受免费版本提供的全部功能。
          </p>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-gradient-to-r from-red-600 to-orange-600 text-white px-12 py-4 rounded-full font-semibold text-xl hover:shadow-lg hover:shadow-red-500/25 transition-shadow"
          >
            立即下载
          </motion.button>
        </motion.div>
      </section>
    </div>
  );
}
